/**
 * @author richard
 */
function changeElementStyle(element_id, the_property, new_value){

    var the_element = document.getElementById(element_id);
    
    if (document.defaultView && document.defaultView.getComputedStyle) { // IS MOZILLA BASED BROWSER //;
        var old_value = document.defaultView.getComputedStyle(the_element, '').getPropertyValue(the_property);
        
        
        // alert('DOM way: changing '+the_property+' from '+old_value+' to '+new_value); //
        switch (the_property) {
            case "background-color":
                the_element.style.backgroundColor = new_value;
                break;
            case "color":
                the_element.style.color = new_value;
                break;
            case "font-family":
                the_element.style.fontFamily = new_value;
                break;
            case "font-weight":
                the_element.style.fontWeight = new_value;
                break;
            case "font-size":
                the_element.style.fontSize = new_value;
                break;
		case "font-size":
                the_element.style.textAlign = new_value;
                break;
            case "increase-margin":
                var old_value = document.defaultView.getComputedStyle(the_element, '').getPropertyValue('margin-top');
                var current_margin = parseInt(old_value, 10);
                var new_margin = current_margin + 2;
                
                the_element.style.marginTop = new_margin + "px";
                the_element.style.marginBottom = new_margin + "px";
                the_element.style.marginLeft = new_margin + "px";
                the_element.style.marginRight = new_margin + "px";
                break;
            case "decrease-margin":
                var old_value = document.defaultView.getComputedStyle(the_element, '').getPropertyValue('margin-top');
                var current_margin = parseInt(old_value, 10);
                var new_margin = current_margin - 2;
                
                the_element.style.marginTop = new_margin + "px";
                the_element.style.marginBottom = new_margin + "px";
                the_element.style.marginLeft = new_margin + "px";
                the_element.style.marginRight = new_margin + "px";
                break;
            case "increase-padding":
                var old_value = document.defaultView.getComputedStyle(the_element, '').getPropertyValue('padding-top');
                var current_padding = parseInt(old_value, 10);
                var new_padding = current_padding + 2;
                
                the_element.style.paddingTop = new_padding + "px";
                the_element.style.paddingBottom = new_padding + "px";
                the_element.style.paddingLeft = new_padding + "px";
                the_element.style.paddingRight = new_padding + "px";
                break;
            case "decrease-padding":
                var old_value = document.defaultView.getComputedStyle(the_element, '').getPropertyValue('padding-top');
                var current_padding = parseInt(old_value, 10);
                var new_padding = current_padding - 2;
                
                the_element.style.paddingTop = new_padding + "px";
                the_element.style.paddingBottom = new_padding + "px";
                the_element.style.paddingLeft = new_padding + "px";
                the_element.style.paddingRight = new_padding + "px";
                break;
            case "text-align":
                the_element.style.textAlign = new_value;
                break;
            case "width":
                the_element.style.width = new_value;
                break;
        }
    }
    
    
    else 
        if (document.uniqueID && the_element.currentStyle) { // IS INTERNET EXPLORER //;
            alert('Sorry, not working in IE at the moment');
        }
    
    return the_element;
    
}

function write_css() {
    // some clever loops here no doubt. for now just the basic proof of concept //
    var the_element = document.getElementById('body');
    var the_text = '';
    var the_value = document.defaultView.getComputedStyle(the_element, '').getPropertyValue('background-color') + "}";
    the_text = "#body { background-color: " + document.defaultView.getComputedStyle(the_element, '').getPropertyValue('background-color') + "}";
    the_text =  the_text + "\n/* etc */";
    document.the_form.elements["the_css"].value = the_text;
}


// Start of Floating Div Code //
var floating_elements = ['FloatingForm'];
// Make all the items drag able by creating Draggable objects
function float_elements(){
    floating_elements.each(function(item){
        new Draggable(item, {});
    });
}

//Start of color slider div code//




